<template>
  <div class="_wrap">
    <subTit title="学科情况"/>
    <div class="chartBox">
      <eChart :option="option"></eChart>
      <div class="_legend">
        <div class="itemGap" v-for="(item, index) in list" :key="index">
          <i></i>
          <div class="label">{{item.label}}:</div>
          <div class="value">{{item.value}}<span>人</span></div>
          <div class="rate">{{item.rate}}%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import _ from 'lodash'
  import subTit from '../components/subTit'
  export default {
    name: 'itemLeftBottom',
    components: { subTit },
    data() {
      return {
        option: {},
        dot: require('@/assets/imgPersonnel/dot.svg'),
        list: []
      }
    },
    mounted() {
      let data = [
        { value: 420, label: '语文' },
        { value: 310, label: '数学' },
        { value: 210, label: '英语' },
        { value: 350, label: '科学' },
        { value: 360, label: '体育' }
      ]
      this.option = this.getOption(data)
      this.list = this.rateDataFormat(data)
    },
    methods: {
      getOption(data){
        return {
          color: ['#71FFFF'],
          grid: {
            // top: 30,
            // left: 50
          },
          radar: {
            radius: '70%',
            center: ['50%', '58%'],
            nameGap: 10,
            axisLine: {
              show: false
            },
            axisLabel: {
              fontSize: 14,
              color: 'rgba(255,255,255,.72)',
              fontFamily: 'PingFangSC'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(111,153,172, .5)',
                type: 'dashed'
              }
            },
            splitArea: {
              show: false
            },
            // shape: 'circle',
            indicator: data.map(item=>{
              return {name:item.label}
            })// max
          },
          series: [
            {
              name: '',
              type: 'radar',
              data: [
                {
                  value: data.map(item=>{
                    return item.value
                  }),
                  name: ''
                }
              ],
              symbol: `image://${this.dot}`,
              symbolSize: 40,
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(0,255,250, .54)' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(0,255,250, .04)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                },
              },
            }
          ]
        }
      },
      rateDataFormat(data){
        let total = _.sumBy(data, (o)=> { return Number(o.value) })
        return _.map(data, (item) => {
          return {
            ...item,
            rate: ((item.value / total) * 100).toFixed(1)
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    width: 100%;
    .chartBox {
      height: 220px;
      display: grid; grid-template-columns: 1fr 1fr;
      ._legend {
        display: flex; flex-direction: column; justify-content: center;
        .itemGap {
          display: flex; align-items: center; justify-content: flex-end;
          padding: 5px 0;
          i{ display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #71FFFF; margin-right: 8px; }
          .label { font-size: 16px; letter-spacing: 0.96px; font-family: PingFangSC; }
          .value {
            margin-left: 12px; margin-right: 8px; font-size: 18px; font-family: DINPro;
            .unit { font-size: 14px; font-family: PingFangSC; margin-left: 5px; }
          }
          .rate { color: #01DDE0; font-size: 18px; }

        }
      }
    }
  }
</style>
